<template>
  <view class="container">
    <button @click="chooseAndPreviewImage" style="width: 100%; margin: 10rpx 0;">
      选择本地图片并预览
    </button>
    
    <image v-if="localImageUrl" :src="localImageUrl" style="width: 100%; margin: 10rpx 0;" mode="widthFix"></image>

    <button @click="getTomorrowWeather" style="width: 100%; margin: 10rpx 0;">
      获取明天天气预报
    </button>
    <view v-if="tomorrowWeather" style="padding: 20rpx; background: #f5f5f5; margin: 10rpx 0;">
      <text>日期：{{ tomorrowWeather.date }}</text>
      <text>星期：{{ tomorrowWeather.week }}</text>
      <text>最高温：{{ tomorrowWeather.high }}℃</text>
      <text>最低温：{{ tomorrowWeather.low }}℃</text>
    </view>
    <button @click="downloadNetImage" style="width: 100%; margin: 10rpx 0;">
      下载网络图片
    </button>
    <image v-if="netImageUrl" :src="netImageUrl" style="width: 100%; margin: 10rpx 0;" mode="widthFix"></image>
    <button @click="downloadVideo" style="width: 100%; margin: 10rpx 0;">
      下载视频
    </button>
    <video v-if="videoUrl" :src="videoUrl" controls style="width: 100%; margin: 10rpx 0;"></video>
  </view>
</template>


<script>
export default {
  data() {
    return {
      localImageUrl: '',
      
      tomorrowWeather: null,
      
      netImageUrl: '',
      
      videoUrl: '',
      
      pathConfig: {
        weatherURL: "http://t.weather.sojson.com/api/weather/city/101230501",
        imageURL: "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg",
        videoURL: "https://media.w3.org/2010/05/sintel/trailer.mp4"
      }
    };
  },
  methods: {
    
    chooseAndPreviewImage() {
      uni.chooseImage({
        count: 1, 
        success: (chooseRes) => {
          const tempFilePath = chooseRes.tempFilePaths[0];
          
          uni.previewImage({
            urls: [tempFilePath],
            current: 0
          });
          
          this.localImageUrl = tempFilePath;
        },
        fail: () => {
          uni.showToast({ title: '选择图片失败', icon: 'none' });
        }
      });
    },

    getTomorrowWeather() {
      uni.request({
        url: this.pathConfig.weatherURL,
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
           
            const tomorrowData = res.data.data.forecast[1];
            this.tomorrowWeather = {
              date: tomorrowData.date,
              week: tomorrowData.week,
              high: tomorrowData.high.replace('高温 ', ''),
              low: tomorrowData.low.replace('低温 ', '')
            };
          } else {
            uni.showToast({ title: '获取天气失败', icon: 'none' });
          }
        },
        fail: () => {
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        }
      });
    },

    
    downloadNetImage() {
      uni.downloadFile({
        url: this.pathConfig.imageURL,
        onProgressUpdate: (progressRes) => {
          console.log(`图片下载进度：${progressRes.progress}%`);
        },
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            this.netImageUrl = downloadRes.tempFilePath;
            uni.showToast({ title: '图片下载成功', icon: 'success' });
          }
        },
        fail: () => {
          uni.showToast({ title: '图片下载失败', icon: 'none' });
        }
      });
    },

    
    downloadVideo() {
      uni.downloadFile({
        url: this.pathConfig.videoURL,
        onProgressUpdate: (progressRes) => {
          console.log(`视频下载进度：${progressRes.progress}%`);
          console.log(`已下载：${progressRes.totalBytesWritten}B / 总大小：${progressRes.totalBytesExpectedToWrite}B`);
        },
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            
            uni.saveFile({
              tempFilePath: downloadRes.tempFilePath,
              success: (saveRes) => {
                this.videoUrl = saveRes.savedFilePath;
                uni.showToast({ title: '视频下载并保存成功', icon: 'success' });
              },
              fail: () => {
                uni.showToast({ title: '视频保存失败', icon: 'none' });
              }
            });
          }
        },
		 fail: () => {
		           uni.showToast({ title: '视频下载失败', icon: 'none' });
		         }
		       });
		     }
		   }
		 };
		 </script>

<style scoped>
.container {
  padding: 20rpx;
}
.weather-card {
  margin: 20rpx 0;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
}
</style>